<style lang="scss" scoped>
.el-table {
  ::v-deep {
    .el-table__expanded-cell {
      padding: 10px;
      background-color: #f0f0f0;

      &:hover {
        background-color: #f0f0f0 !important;
      }
    }
  }
}

.footer {
  height: 52px;
}
</style>

<template>
  <div class="app-container">
    <el-tabs v-model="tabId">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.item_id"
        :label="item.item_name"
        :name="`${item.item_id}`"
      />
    </el-tabs>

    <el-table
      v-loading="listLoading"
      :data="list"
      height="calc(100vh - 230px)"
      border
    >
      <el-table-column type="expand">
        <template slot-scope="{ row }">
          <el-table :data="row.item" border>
            <el-table-column label="item_name" prop="item_name" width="200px" />
            <el-table-column
              label="item_value"
              prop="item_value"
              width="200px"
            />
            <el-table-column label="info" prop="info" min-width="200px" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="配置名称" prop="name" width="200px" />
      <el-table-column label="code" prop="code" width="150px" />
      <el-table-column label="简介" prop="info" min-width="200px" />

      <el-table-column label="锁定" fixed="right" width="70px">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.lock"
            :disabled="row.lockChanging"
            @change="switchChanged('lock', row, $event)"
          />
        </template>
      </el-table-column>

      <el-table-column label="启用" fixed="right" width="70px">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :disabled="row.statusChanging || row.lock === 1"
            @change="switchChanged('status', row, $event)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="220px">
        <template slot-scope="{ row }">
          <el-button
            :disabled="row.logLoading"
            type="primary"
            @click="showLog(row)"
          >日志</el-button>

          <el-button
            type="primary"
            :disabled="row.lock === 1"
            @click="editConfig(row)"
          >编辑</el-button>

          <el-button
            type="danger"
            :disabled="row.lock === 1"
            @click="removeConfig(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="J-flexBC footer">
      <div>
        <el-button type="primary" @click="addConfig">新增</el-button>
      </div>
      <Pagination
        v-show="pagination.total > 0"
        :total="pagination.total"
        :page.sync="pagination.page"
        :limit.sync="pagination.limit"
        @pagination="getList"
      />
    </div>

    <UpdateConfigDialog
      :visible.sync="updateConfigDialog.visible"
      :type="updateConfigDialog.type"
      :data="updateConfigDialog.data"
      :current-group-id="tabId"
      :group="tabs"
      @reload="getList"
    />

    <LogDialog :visible.sync="logDialog.visible" :data="logDialog.data" />
  </div>
</template>

<script>
import _ from 'lodash'
import {
  getTabs,
  configList,
  changeConfigStatus,
  lockConfig,
  removeConfig,
  getLog
} from '@/api/system/config'

import Pagination from '@/components/Pagination/index.vue'

import UpdateConfigDialog from '@/components/Template/Config/UpdateConfigDialog.vue'
import LogDialog from '@/components/LogDialog/index.vue'

export default {
  name: 'Menu',
  components: {
    Pagination,
    LogDialog,
    UpdateConfigDialog
  },

  data() {
    return {
      tabId: 0,
      tabs: [],

      list: [],
      listLoading: false,

      pagination: {
        page: 1,
        limit: 30,
        total: 0
      },

      updateConfigDialog: {
        visible: false,
        type: 'create',
        data: {}
      },

      logDialog: {
        visible: false,
        data: []
      }
    }
  },

  watch: {
    tabId() {
      this.getList()
    }
  },

  created() {
    this.getTabs()
  },

  methods: {
    getTabs() {
      getTabs({
        platform_id: 1
      }).then((res) => {
        this.tabs = _.get(res, 'data.item', [])
        this.tabId = `${_.get(this.tabs, '0.item_id', 0)}`
      })
    },

    getList() {
      this.listLoading = true

      configList({
        group_id: this.tabId,
        page: 1,
        limit: 30
      })
        .then((res) => {
          this.list = _.get(res, 'data.data', [])
          this.pagination.total = _.get(res, 'data.total', 0)
        })
        .finally(() => {
          this.listLoading = false
        })
    },

    switchChanged(type, row, val) {
      let request
      let params
      if (type === 'status') {
        request = changeConfigStatus
        params = {
          platform_id: row.platform_id,
          name: row.name,
          status: val
        }
      } else {
        request = lockConfig
        params = {
          platform_id: row.platform_id,
          lock: val,
          status: row.status
        }
      }

      this.$set(row, `${type}Changing`, true)
      // 状态切换
      request(params)
        .then(() => {
          this.$set(row, `${type}Changing`, false)
        })
        .catch(() => {
          this.$set(row, `${type}Changing`, false)
          row[type] = val === 1 ? 0 : 1
        })
    },

    showLog(row) {
      this.$set(row, 'logLoading', true)
      getLog({
        platform_id: row.platform_id,
        name: row.name
      })
        .then((res) => {
          this.logDialog.data = res.data
          this.logDialog.visible = true
        })
        .finally(() => {
          this.$set(row, 'logLoading', false)
        })
    },

    addConfig() {
      this.updateConfigDialog.type = 'create'
      this.updateConfigDialog.visible = true
    },

    editConfig(row) {
      this.updateConfigDialog.type = 'edit'
      this.updateConfigDialog.data = row
      this.updateConfigDialog.visible = true
    },

    removeConfig(row) {
      this.$confirm('确定要删除吗?').then(() => {
        removeConfig({
          platform_id: row.platform_id,
          name: row.name
        }).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    }
  }
}
</script>
